<template>
    <div>
        <!-- 路由容器 -->
        <router-view></router-view>
        <!-- <tabbar v-show="$store.state.tabbarState"></tabbar> -->
        <tabbar v-show="tabbarState"></tabbar>
    </div>
</template>

<script>
import tabbar from '../components/02/Tabbar.vue';
// import bus from '@/bus'; // 事件总线，保证所有组件引入的都是同一个bus对象
import { mapState } from 'vuex'; // ES6导入单独的方法，注意要定义在计算属性中

export default {
    data() {
        return {
            isShow: true
        };
    },
    components: {
        tabbar
    },
    // 计算属性
    computed: {
        // ...表示ES6展开合并运算符， 例如 o1={name:'aaa'}; o2={age:23}; o3={...o1, ...o2, sex:1};
        ...mapState(['tabbarState']) // 等效于注册了tabbarState()计算属性并且返回了tabbarState状态值
    }
    // 注意事件的注册时机
    // beforeMount() {
    //     bus.$on('tabbar-isShow', data => {
    //         this.isShow = data;
    //     });
    // }
};
</script>

<style lang="scss" scoped></style>
